<template>
  <el-row>
    <el-col :span="6">
      <div class="grid-content bg-1">
        <div class="iconStyle"><i class="el-icon-user"></i></div>
        <div><h2>102,400</h2></div>
        <div><h3>会员在线</h3></div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-2">
        <div class="iconStyle"><i class="el-icon-shopping-cart-1"></i></div>
        <div><h2>288,699</h2></div>
        <div><h3>设备数目</h3></div>
      </div>
    </el-col>
     <el-col :span="6">
      <div class="grid-content bg-3">
        <div class="iconStyle"><i class="el-icon-date"></i></div>
        <div><h2>5,400</h2></div>
        <div><h3>本周盈利</h3></div>
      </div>
    </el-col>
     <el-col :span="6">
      <div class="grid-content bg-4">
        <div class="iconStyle"><i class="el-icon-trophy"></i></div>
        <div><h2>1,060,386</h2></div>
        <div><h3>总计金额</h3></div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
    
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.iconStyle{
  font-size: 50px;
}
.grid-content {
  margin-top: 10%;
  border-radius: 20px;
  margin: 10%;
  height: 260px;
}
.bg-1 {
  background-image: -webkit-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
  .el-icon-user{
    font-weight: bolder;
    margin-top: 20%;
  }
}
.bg-2 {
  background-image: -webkit-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
  .el-icon-shopping-cart-1{
    font-weight: bolder;
    margin-top: 20%;
  }
}
.bg-3 {
  background-image: -webkit-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
  .el-icon-date{
    font-weight: bolder;
    margin-top: 20%;
  }
}
.bg-4 {
  background-image: -webkit-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
  .el-icon-trophy{
    font-weight: bolder;
    margin-top: 20%;
  }
}
</style>